﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="json.aspx.cs" Inherits="jQuery.Ajax.asmx.json" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        p {
            font-family: '微软雅黑';
        }
        strong {
            color: green;
            font-style: normal;
            margin: 5px;
        }
    </style>
    <script type="text/javascript" src="../jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            setInterval(readRemainTime, 1000);
            //readRemainTime();
        });

        function readRemainTime() {
            $.ajax({
                url: '/asmx/countdown.asmx/GetRemainTime',
                type: "POST",
                dataType: 'json',
                contentType: "application/json; charset=utf-8",//设置服务器返回json格式
                success: function (data) {
                    data = eval('(' + data.d + ')');
                    $('#startTime').html(data.beginTime);
                    $('#nowTime').html(data.nowTime);
                    $('#day').html(data.remainTime.d);
                    $('#hour').html(data.remainTime.h);
                    $('#minute').html(data.remainTime.m);
                    $('#second').html(data.remainTime.s);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                },
                complete: function (XMLHttpRequest, textStatus) {
                    //alert(textStatus);
                }
            });
        }
    </script>
</head>
<body>
   
    <div>
    <p>活动开始时间：<strong id="startTime"></strong></p>
    <p>服务器现在时间：<strong id="nowTime"></strong></p>
    <p>距离活动开始还剩：<strong id="day"></strong><small>天</small><strong id="hour"></strong><small>小时</small><strong id="minute"></strong><small>分</small><strong id="second"></strong><small>秒</small></p>
    </div>
  
</body>
</html>
